<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="24" v-show="isShow">
        <!-- search -->
        <div class="panel-head">线路列表</div>
        <div class="panel-body">
          <el-form inline size="small" class="demo-form-inline">
            <!-- 线路id -->
            <el-form-item label="线路id">
              <el-input
                v-model="stationName"
                placeholder="请输入线路id"
              ></el-input>
            </el-form-item>
            <el-form-item label="线路名称">
              <el-input
                v-model="lineName"
                placeholder="请输入线路名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search">搜索</el-button>
              <el-button type="danger" icon="el-icon-delete">删除</el-button>
            </el-form-item>
          </el-form>
          <el-row class="mb10">
            <!-- 新增线路 -->
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              @click="handleAdd"
              >新增线路</el-button
            >
            <right-toolbar
              :showSearch.sync="showSearch"
              @queryTable="getCardList"
              :columns="columns"
            ></right-toolbar>
          </el-row>
          <div class="cardTable">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              border
              style="width: 100%"
            >
              <el-table-column type="selection" width="40"></el-table-column>
              <!-- 线路id -->
              <el-table-column
                label="编号"
                align="center"
                :resizable="disabled"
                v-if="columns[0].visible"
              >
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <!-- 线路名称 -->
              <el-table-column
                prop="stationName"
                label="线路名称"
                align="center"
                :resizable="disabled"
                v-if="columns[1].visible"
              ></el-table-column>
              <!-- 线路类型 -->
              <el-table-column
                prop="longitude"
                label="方向"
                align="center"
                :resizable="disabled"
                v-if="columns[2].visible"
              ></el-table-column>
              <!-- 上行开始时间 -->
              <el-table-column
                prop="latitude"
                label="首末站"
                :resizable="disabled"
                v-if="columns[3].visible"
              ></el-table-column>
              <!-- 上行结束时间 -->
              <el-table-column
                prop="lineName"
                label="首末班时间"
                align="center"
                :resizable="disabled"
                v-if="columns[4].visible"
              ></el-table-column>
              <!-- 下行开始时间 -->
              <el-table-column
                prop="lineNmber"
                label="票价"
                :resizable="disabled"
                v-if="columns[5].visible"
              ></el-table-column>
              <!-- 下行结束时间 -->
              <el-table-column
                prop="lineType"
                label="站点数"
                :resizable="disabled"
                v-if="columns[6].visible"
              ></el-table-column>
              <!-- 操作 -->
              <el-table-column
                label="操作"
                :resizable="disabled"
                align="center"
                v-if="columns[7].visible"
              >
                <!-- 详情 -->
                <el-tooltip effect="dark" content="线路详情" placement="top">
                  <el-button
                    type="success"
                    icon="el-icon-info"
                    @click="getTableInfo = true"
                    size="small"
                    plain
                    @mouseenter="details"
                  ></el-button>
                </el-tooltip>
                <!-- 删除 -->
                <el-tooltip effect="dark" content="删除" placement="top">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="getTableInfo = true"
                    size="small"
                    plain
                  ></el-button>
                </el-tooltip>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      disabled: false, // 禁止通过拖动改变对应列宽度
      isShow: true,
      stationName: '',
      lineName: '',
      showSearch: true, // 显示搜索条件
      tableData: [
        {
          date: '210402Tc8888',
          stationName: '宗礼有轨电车',
          longitude: '上行',
          latitude: '太子城遗址公园-冰雪会堂',
          lineName: '06:20-21:20',
          lineNmber: '2',
          lineType: '6'
        }
      ], // 表格的数据
      // 表格列信息
      columns: [
        { key: 0, label: `编号`, visible: true },
        { key: 1, label: `线路名称`, visible: true },
        { key: 2, label: `方向`, visible: true },
        { key: 3, label: `首末站`, visible: true },
        { key: 4, label: `首末班时间`, visible: true },
        { key: 5, label: `票价`, visible: true },
        { key: 6, label: `站点数`, visible: true },
        { key: 7, label: `操作`, visible: true }
      ]
    }
  },
  methods: {
    onSubmit () {
      window.console.log('11111111111111')
    },
    details () {},
    handleAdd () {
      console.log('1')
    },
    getCardList () {}
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  color: #fff;
  background-color: #f2f6fc;
  padding: 0;
  .panel-head {
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    background-color: #909399;
    padding: 15px;
  }
  .panel-body {
    padding: 10px;
  }
}
</style>
